import React from 'react';
import { Table, Radio, Popconfirm, Input, Form, Space, message, Modal, Button } from 'antd';
import { useEffect, useState } from 'react';
import { useGetaccountQuery, usePuteditaccountMutation, useDeleteaccountMutation, usePostaddaccountMutation } from '../../store/request/accountrequest';

const AccountRecord = () => {
    
    const [messageApi, contextHolder] = message.useMessage();

    const messageerror = (editordel) => {
        //message.success('This is a success message');
        if (editordel === 0) {
            messageApi.open({
                type: 'error',
                content: '编辑失败',
            });
        }
        else if (editordel === 1) {
            messageApi.open({
                type: 'error',
                content: '删除失败',
            });
        }
        else {
            messageApi.open({
                type: 'error',
                content: '添加失败',
            });
        }
        //console.log("消息框");
    };
    const messagesucess = (editordel) => {
        if (editordel === 0) {
            messageApi.open({
                type: 'success',
                content: '编辑成功',
            });
        }
        else if (editordel === 1) {
            messageApi.open({
                type: 'success',
                content: '删除成功',
            });
        }
        else {
            messageApi.open({
                type: 'success',
                content: '添加成功',
            });
        }
    };

    //添加数据的表单页面
    const CollectionCreateForm = ({ open, onCreate, onCancel }) => {
        const [form] = Form.useForm();

        return (
            <Modal
                open={open}
                title="添加账户记录"
                okText="添加"
                cancelText="取消"
                onCancel={onCancel}
                onOk={() => {
                    form
                        .validateFields()
                        .then((values) => {
                            form.resetFields();
                            onCreate(values);
                        })
                        .catch((info) => {
                            console.log('Validate Failed:', info);
                        });
                }}
            >
                <Form
                    form={form}
                    layout="vertical"
                    name="form_in_modal"
                    initialValues={{
                        modifier: 'public',
                    }}
                >
                    <Form.Item
                        name="loginname"
                        label="用户名"
                        rules={[
                            {
                                required: true,
                                message: '请输入用户名!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        label="密码"
                        rules={[
                            {
                                required: true,
                                message: '请输入密码!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>


                    <Form.Item name="authoritykey" label="权限级别"  rules={[
                            {
                                required: true,
                                message: '请选择权限级别!',
                            },
                        ]} className="collection-create-form_last-form-item">
                        <Radio.Group>

                            <Radio value={0}>管理员</Radio>
                            <Radio value={1}>普通</Radio>
                        </Radio.Group>
                    </Form.Item>

                </Form>
            </Modal>
        );
    };
    //用于是否打开添加modal的表单页面
    const [open, setOpen] = useState(false);
    //添加数据表单的添加方法
    const onAddDate = async (values) => {
        //console.log('Received values of form: ', values);
        setOpen(false);
        const r = await addtrigger(values).unwrap();
        if (r.code === 200) {
            //console.log("成功")
            messagesucess(3);

        } else {
            messageerror(3);
        }

    };
    const [tableParams, setTableParams] = useState({
        pagination: {
            current: 1,
            pageSize: 10,
        },
    });
    //这里为什么要包一层方法传递tableParams参数，是为了避免useEffect方法改变tableParams后会重新发送数据请求
    //这里包了一层后就只看tableParams里的pagesize和page会不会发生改变，tableParams状态的改变没有影响，
    const getRandomuserParams = (params) => ({
        pagesize: params.pagination?.pageSize,
        page: params.pagination?.current,
        //...params,
    });
    //tableParams发生变化就会执行发送请求和参数
    const result = useGetaccountQuery(getRandomuserParams(tableParams));
    const [edittrigger] = usePuteditaccountMutation();
    const [deltrigger] = useDeleteaccountMutation();
    const [addtrigger] = usePostaddaccountMutation();
    const [form] = Form.useForm(); // 从 Form.useForm() 中解构 form

    const [radiovalue, setRadioValue] = useState(0);
    const radioonChange = (e) => {
        //console.log('radio checked', e.target.value);
        setRadioValue(e.target.value);
    };


    //这个方法页面加载时就会不停的执行
    const EditableCell = ({ editing, dataIndex, title, inputType, record, index, children, ...restProps }) => { // 定义 EditableCell 组件并传入 props

        let inputNode;
        if (dataIndex === "authoritykey") {
            inputNode = <Radio.Group label="权限级别" onChange={radioonChange} value={radiovalue}>

                <Radio value={0}>管理员</Radio>
                <Radio value={1}>普通</Radio>
            </Radio.Group>
        }
        else {
            inputNode = <Input />
        }

        return (
            <td {...restProps}>
                {editing ? ( // 如果正在编辑，渲染带有相应 props 的 inputNode
                    <Form.Item
                        name={dataIndex}
                        style={{ margin: 0 }}
                        rules={[
                            {
                                required: true,
                                message: `请输入${title}!`,
                            },
                        ]}
                    >
                        {inputNode}
                    </Form.Item>
                ) : (
                    children // 否则渲染 children（文本）
                )}
            </td>
        );
    };
    const columns = [
        {
            title: '序号',
            dataIndex: 'key',
            editable: false,
            sorter: (a, b) => a.key - b.key,

        },
        {
            title: '用户名',
            dataIndex: 'loginname',
            editable: true,
        },
        {
            title: '密码',
            dataIndex: 'password',
            editable: true,
        },
        {
            title: '权限级别',
            dataIndex: 'authoritykey',
            editable: true,
            //判断这一列数据是0就显示设备，1就显示传感器
            render: (c) => `${c ? '普通' : '管理员'}`,
            //表格栏里点击筛选按钮会出来的内容
            filters:
                [
                    {
                        text: '管理员',
                        value: 0,
                    },
                    {
                        text: '普通',
                        value: 1,
                    },

                ],
            onFilter: (value, record) => (record.authoritykey === value),//这里的record就是每一条数据

        },

        {
            //表格最后的操作按钮
            title: '操作',
            dataIndex: 'action',

            render: (_, record) => { // 使用 Popconfirm 组件渲染操作列
                const editable = isEditing(record);//判断这一行的key是否为editingKey，如果是则说明点击了edit，如果不是则说明没有点击
                //const deleteable = isDeleting(record);//判断这一行的key是否为deletingKey，如果是则说明点击了delete，如果不是则说明没有点击
                return editable ? (

                    <span>
                        <a  onClick={() => save(record.key)} style={{ marginRight: 8 }}>
                            保存
                        </a>
                        <Popconfirm title="确定取消吗?" onConfirm={cancel}>
                            <a>取消</a>
                        </Popconfirm>
                    </span>

                ) : (
                    //点击了edit就把这一行的key设为editingKey，重新渲染，然后editable变为true，显示保存和取消a标签，editingKey不等于空说明有行点了edit，则其他行都是disabled
                    <Space size="middle">
                        <a disabled={editingKey !== ''} onClick={() => edit(record)}>
                            编辑
                        </a>
                        <Popconfirm title="确定删除吗?" onConfirm={() => deldata(record.key)} onCancel={cancel} okText="Yes" cancelText="No">
                            <a >
                                删除
                            </a>
                        </Popconfirm>
                    </Space>
                );

            },
        },
    ];
    //格式化传递的参数以满足后端api的参数要求


    const [editingKey, setEditingKey] = useState(''); // 初始化正在编辑的 key 的 state

    const isEditing = (record) => record.key === editingKey; // 定义 isEditing 函数以检查记录是否正在被编辑

    const edit = (record) => { // 定义 edit 函数以将 editingKey state 设置为记录的 key
        //表单更新数据只能用setFieldsValue方法，不能用setstate方法，这样就能获取原始值

        form.setFieldsValue({
            loginname: record.loginname,
            password: record.password,
            authoritykey: record.authoritykey,
            //...record,  //一展开record，就会报错date.locale is not a function，但是之前arriveddate已经赋值为空字符串，所以除了arriveddate为空外，其余属性按照record展开
        });

        setEditingKey(record.key);
    };

    const save = async (key) => {
        //这里的row就是表单的所有项的值作为一个row对象存储
        //这里会异步
        const row = await form.validateFields();

        row.key = key;
       
        //发送put请求到服务器
        const r = await edittrigger(row).unwrap();
        //console.log(r);
        if (r.code === 200) {
            //console.log("成功")
            messagesucess(0);

        } else {
            messageerror(0);
        }
        setEditingKey('');

    };

    const cancel = () => { // 定义 cancel 函数以重置 editingKey state
        setEditingKey('');

    };
    const deldata = async (key) => { // 定义 cancel 函数以重置 editingKey state
        //console.log(key);
        const r = await deltrigger(key).unwrap();
        if (r.code === 200) {
            //console.log("成功")
            messagesucess(1);

        } else {
            messageerror(1);
        }
        setEditingKey('');

    };

    //useEffect 钩子函数将在组件渲染后执行,如果isSuccess状态发生改变，还会再执行 
    useEffect(() => {

        //如果请求成功则调用setTableParams方法
        //在 useEffect 的回调函数中，我们检查 isSuccess 是否为 true，如果是，就执行setTableParams操作。
        //console.log("effect");
        if (result.isSuccess) {

            setTableParams({
                ...tableParams,
                pagination: {
                    ...tableParams.pagination,
                    total: result.data.data.total,

                },
            });
        }


    }, [result.isSuccess]);

    //表格内一旦发生如分页，排序，筛选等变化就调用setTableParams方法，
    //继而引起tableParams的变化和调用useEffect方法去发送携带tableParams参数请求到服务器
    //服务器返回相应数据到表格，然后再调用setTableParams方法
    const handleTableChange = (pagination, filters, sorter) => {

        setTableParams({
            pagination,

        });

    };
    //这个比EditableCell先执行，这个是点了edit后展示的form表单的设置
    const mergedColumns = columns.map((col) => { // 通过映射 columns 数组定义 mergedColumns 数组
        if (!col.editable) { // 如果列不可编辑，返回列
            return col;
        }
       
        return {
            ...col, // 否则返回编辑行新对象，其 render 函数为 EditableCell 组件
            onCell: (record) => (

                {

                    record,
                    //inputType: col.dataIndex === 'category' ? 'radio' : 'text',
                    dataIndex: col.dataIndex,
                    title: col.title,
                    editing: isEditing(record),//判断这一行的key是否为editingKey，为true说明这一行点击了edit
                    // 将单元格的原始值传递给 EditableCell 组件

                }),
        };
    });

    return (
        <>
            {/* 必须把contextHolder包裹整个组件才能显示message消息框 */}
            {contextHolder}
            <Button
                onClick={() => {
                    setOpen(true);
                }}
                type="primary"
                style={{
                    marginBottom: 16,
                }}
            >
                添加
            </Button>
            <CollectionCreateForm
                open={open}
                onCreate={onAddDate}
                onCancel={() => {
                    setOpen(false);
                }}
            />
            <Form form={form} component={false}>

                <Table
                    components={{
                        body: {
                            cell: EditableCell, // 使用 EditableCell 组件作为表格单元格
                        },
                    }}
                    bordered
                    //dataSource={data}
                    dataSource={result.isSuccess ? result.data.data.pagedata : []} // 将 dataSource prop 设置为数据 state
                    columns={mergedColumns} // 将 columns prop 设置为 mergedColumns 数组
                    rowClassName="editable-row"
                    pagination={tableParams.pagination}
                    loading={result.isLoading}
                    onChange={handleTableChange}

                />
            </Form>
        </>
    )


}


export default AccountRecord



